<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增重复排课')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: timepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-schedule-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">选择班级：</label>
            <div class="col-sm-8">
                <input id="classId" name="classId" type="hidden"/>
                <input id="className" name="className" readonly onclick="selectClass()" class="form-control" type="text"
                       required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">开始日期：</label>
            <div class="col-sm-3">
                <div class="input-group date">
                    <input name="startDate"
                           th:value="${#dates.format(new java.util.Date(),'yyyy-MM-dd')}"
                           class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">结束日期：</label>
            <div class="col-sm-3">
                <div class="input-group date">
                    <input name="endDate"
                           th:value="${#dates.format(new java.util.Date(),'yyyy-MM-dd')}"
                           class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">重复方式：</label>
            <div class="col-sm-9">
                <div class="radio">
                    <label for="repeatType">
                        <input id="repeatType" value="1" name="repeatType" class="radio" type="radio" checked="true"
                               required>每周重复</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">周几上课：</label>
            <div class="col-sm-9">
                <label class="checkbox-inline">
                    <input type="checkbox" name="weekAll" value="" id="weekAll">全选</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="weeks" value="周一" id="week1">周一</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="weeks" value="周二" id="week2">周二</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="weeks" value="周三" id="week3">周三</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="weeks" value="周四" id="week4">周四</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="weeks" value="周五" id="week5">周五</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="weeks" value="周六" id="week6">周六</label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="weeks" value="周日" id="week7">周日</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">上课时段：</label>
            <div class="col-sm-2">
                <div class="input-group date">
                    <input name="startTime" class="form-control" placeholder="HH-mm" type="text" required readonly>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="input-group date">
                    <input name="endTime" class="form-control" placeholder="HH-mm" type="text" required readonly>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">教师：</label>
            <div class="col-sm-8">
                <select class="form-control" id="teacherId" name="teacherId">
                    <option th:each="teacher:${teachers}"
                            th:value="${teacher.userId}"
                            th:text="${teacher.userName}">
                    </option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">主题：</label>
            <div class="col-sm-8">
                <input name="topic" class="form-control" type="text">
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-suggest-js"/>
<th:block th:include="include :: bootstrap-typeahead-js"/>
<th:block th:include="include :: timepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "teaching/template"
    $("#form-schedule-add").validate({
        focusCleanup: true
    });

    $(function () {
        $("#weekAll").on("change", function () {
            let weeks = $("input[name='weeks']");
            if ($(this).prop("checked")) {
                weeks.each(function () {
                    $(this).prop("checked", true);
                })
            } else {
                weeks.each(function () {
                    $(this).prop("checked", false);
                })
            }

        })
    })

    function submitHandler() {
        if ($.validate.form()) {
            var data = $('#form-schedule-add').serializeArray();
            var teacherId = $("#teacherId").val();
            var teacherName = $("#teacherId option:selected").text();
            data.push({"name": "teacherName", "value": teacherName});
            $.operate.save(prefix + "/add", data, function (result) {
                var parent = activeWindow();
                if (result.code == 0) {
                    $.modal.close();
                    parent.location.reload();
                } else {
                    $.modal.alert(result.msg);
                }
            });
        }
    }

    $("input[name='startDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true,
        startDate: new Date()
    });
    $("input[name='endDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true,
        startDate: new Date()
    });

    $("input[name='startTime']").timepicker({
        minuteStep: 5,　　//分钟间隔
        showMeridian: false,　　//是否展示网咯时间
        defaultTime: "",　　　　//默认时间
        secondStep: 1　　//秒钟间隔　　　　
    });
    $("input[name='endTime']").timepicker({
        minuteStep: 5,　　//分钟间隔
        showMeridian: false,　　//是否展示网咯时间
        defaultTime: "",　　　　//默认时间
        secondStep: 1　　//秒钟间隔　　　　
    });

    //选择班级
    function selectClass() {
        var options = {
            title: '选择班级',
            url: ctx + "teaching/classes/select",
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var classId = layero.find("iframe")[0].contentWindow.getSelections("classId");
        if (classId.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        var className = layero.find("iframe")[0].contentWindow.getSelections("className");
        $("#classId").val(classId[0]);
        $("#className").val(className[0]);
        $.modal.close(index);
    }
</script>
</body>
</html>
